<template>
  <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body :before-close="close">
    <el-form ref="form" :model="form" :rules="rules" label-width="150px" class="demo-ruleForm">
      <el-form-item label="项目和委托方" prop="project_client">
        <el-cascader
          v-model="form.project_client"
          placeholder="请选择项目和委托方"
          :options="selectData"
          clearable
          filterable
          style="width: 100%"
          @change="project_change"
        />
      </el-form-item>

      <!--      <el-form-item label="入库类型" prop="customer_order_type">-->
      <!--        <el-select v-model="form.customer_order_type" placeholder="入库类型" clearable style="width: 100%">-->
      <!--          <el-option label="采购入库" value="采购入库" />-->
      <!--          <el-option label="退货入库" value="退货入库" />-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->

      <el-form-item prop="goods_number">
        <span slot="label">
          商品总数量
        </span>
        <el-input v-model="form.goods_number" />
      </el-form-item>

      <el-form-item label="客户名称">
        <el-input v-model="form.new_customer_name" />
      </el-form-item>

      <el-form-item label="结算方" prop="settlement">
        <el-input v-model="form.settlement" />
      </el-form-item>

      <el-form-item prop="group_number">
        <span slot="label">
          订单组号
        </span>
        <el-input v-model="form.group_number" />
      </el-form-item>

      <el-form-item prop="customer_business_number">
        <span slot="label">
          客户业务单号
        </span>
        <el-input v-model="form.customer_business_number" />
      </el-form-item>

      <el-form-item prop="relation_order">
        <span slot="label">
          关联订单号
        </span>
        <el-input v-model="form.relation_order" />
      </el-form-item>

      <el-form-item prop="postposition_order">
        <span slot="label">
          后置作业单号
        </span>
        <el-input v-model="form.postposition_order" />
      </el-form-item>

      <el-form-item label="货物托盘数量">
        <el-input v-model="form.new_tray_num" />
      </el-form-item>

      <el-form-item label="货物箱数">
        <el-input v-model="form.new_box_num" />
      </el-form-item>

      <el-form-item label="货物毛重">
        <el-input v-model="form.new_gross_weight" />
      </el-form-item>

      <el-form-item label="货物尺寸">
        <el-input v-model="form.new_goods_dimension" />
      </el-form-item>

      <el-form-item label="货物金额">
        <el-input v-model="form.new_goods_price" />
      </el-form-item>

      <el-form-item>
        <span slot="label">
          收货日期
        </span>
        <div class="block">
          <el-date-picker
            v-model="form.take_date"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            style="width: 100%;"
          />
        </div>
      </el-form-item>

      <el-form-item label="订单日期">
        <div class="block">
          <el-date-picker
            v-model="form.new_order_date"
            type="date"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            style="width: 100%;"
          />
        </div>
      </el-form-item>

      <!--      <el-form-item prop="take_code">-->
      <!--        <span slot="label">-->
      <!--          客户提单号-->
      <!--        </span>-->
      <!--        <el-input v-model="form.take_code" />-->
      <!--      </el-form-item>-->

      <!-- <el-form-item prop="odd_numbers_one">
        <span slot="label">
          参考单号1
        </span>
        <el-input v-model="form.odd_numbers_one" />
      </el-form-item>

      <el-form-item prop="odd_numbers_two">
        <span slot="label">
          参考单号2
        </span>
        <el-input v-model="form.odd_numbers_two" />
      </el-form-item>

      <el-form-item prop="odd_numbers_three">
        <span slot="label">
          参考单号3
        </span>
        <el-input v-model="form.odd_numbers_three" />
      </el-form-item> -->

      <el-form-item label="备注" prop="remarks">
        <el-input v-model="form.remarks" type="textarea" placeholder="请输入备注" autocomplete="off" clearable />
      </el-form-item>
      <el-row style="top: 30px;margin-bottom: 30px;text-align:center;">
        <el-col :span="24">
          <el-button type="primary" size="medium" @click="submitForm('form')">{{ title }}</el-button>
          <el-button size="medium" @click="close()">取消</el-button>
        </el-col>
      </el-row>
    </el-form>
  </el-dialog>
</template>
<script>
import {
  warehousingAdd,
  warehousingEdit,
  getProject,
  get_settlement
} from '@/api/storehouse'
export default {
  name: 'AddEdit',
  props: {
    open: {
      type: Boolean
    },
    // eslint-disable-next-line vue/require-default-prop
    form: {
      type: Object
    },
    // eslint-disable-next-line vue/require-default-prop
    title: {
      type: String
    }
  },
  data() {
    return {
      rules: {
        project_client: [
          { required: true, message: '请选择项目和委托方', trigger: 'change' }
        ],
        // customer_order_type: [
        //   { required: true, message: '请选择入库类型', trigger: 'change' }
        // ],
        goods_number: [
          { required: true, message: '请输入商品总数量', trigger: 'blur' }
        ]
      },
      selectData: {}
    }
  },
  created() {
    this.project()
  },
  mounted() {
  },
  methods: {
    async get_settlement_func(project_id) {
      const { data } = await get_settlement(project_id)
      // this.form.settlement = data.settlement
      // return
      this.$set(this.form, 'settlement', data.settlement)
    },
    project_change() {
      this.get_settlement_func(this.form.project_client[1])
      // get_settlement(this.form.project_client[1]).then(response => {
      //   if (response.code === 10000) {
      //     // that.$set(that.form, 'settlement', response.data.settlement)
      //   }
      // })
    },
    submitForm(formName) {
      const that = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (that.title === '添加') {
            this.add()
          } else {
            this.edit()
          }
        } else {
          return false
        }
      })
    },
    add() {
      const that = this
      if (that.form.new_order_date == undefined) {
        var date = new Date()
        var year = date.getFullYear()
        var month = date.getMonth() + 1
        var day = date.getDate()
        that.form.new_order_date = year + '-' + month + '-' + day
      }
      warehousingAdd(that.form).then(response => {
        if (response.code === 10000) {
          that.$message.success(response.message)
          that.$parent.getList()
          that.$emit('update:open', false)
        }
      })
    },
    edit() {
      const that = this
      if (Array.isArray(this.form.project_client) === false) {
        this.form.project_client = that.form.project_client
      } else if (Array.isArray(this.form.project_client) === true) {
        this.form.project_id = this.form.project_client[0]
        this.form.project_client = this.form.project_client[1]
      }
      warehousingEdit(that.form).then(response => {
        if (response.code === 10000) {
          that.$message.success(response.message)
          that.$parent.getList()
          that.$emit('update:open', false)
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    close() {
      this.$emit('update:open', false)
    },
    project() {
      const that = this
      getProject().then(response => {
        if (response.code === 10000) {
          that.selectData = response.data
        }
      })
    }
  }
}
</script>

